<template>
  <XtxBread>
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <XtxBreadItem
      v-if="breadObj.parentObj"
      :to="`/category/${breadObj.parentObj.id}`"
      >{{ breadObj.parentObj.name }}</XtxBreadItem
    >
    <transition name="xxx" mode="out-in">
      <XtxBreadItem v-if="breadObj.localObj">{{
        breadObj.localObj.name
      }}</XtxBreadItem>
    </transition>
  </XtxBread>
</template>
<script>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
export default {
  name: 'SubBread',
  setup () {
    const store = useStore()
    const route = useRoute()
    const breadObj = computed(() => {
      let subObj = {}
      store.state.category.list.forEach(item => {
        if (item.children) {
          item.children.forEach(item2 => {
            if (item2.id === route.params.id) {
              subObj = {
                parentObj: {
                  name: item.name,
                  id: item.id
                },
                localObj: {
                  name: item2.name,
                  id: item2.id
                }
              }
            }
          })
        }
      })
      return subObj
    })
    return { breadObj }
  }
}
</script>
<style scoped lang="less">
.xxx-enter {
  &-from {
    opacity: 0;
    transform: translateX(80px);
  }
  &-active {
    transition: all 0.5s;
  }
}
.xxx-leave {
  &-to {
    opacity: 0;
    transform: translateX(80px);
  }
  &-active {
    transition: all 0.5s;
  }
}
</style>
